﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>애니메이션 효과 멈추기</title>

    <style type="text/css">
    div 
    {
        position: absolute; background-color: #abc; left: 0px; top:50px;
        width: 60px; height: 60px; margin: 5px;
    }
    </style>

    <script src="jquery-1.6.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
	$("#go").click(function(){
		$(".block").animate({left: ' +=100px', top: '+=100px'}, 2000);
	});
	$("#stop").click(function(){
		$(".block").stop();
		
	});
	$("#back").click(function(){
		$(".block").animate({left: '-=100px', top: '-=100px'},2000);
	});
        	


        });
    </script>

</head>

<body>

    <button id="go">Go</button>
    <button id="stop">STOP!</button>
    <button id="back">Back</button>
    <div class="block"></div>

</body>

</html> 
